<template>
  <div>
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
    <v-chart :forceFit="true" :height="height" :data="ActiveBarDataSource" :scale="scale" :padding="padding">
      <v-tooltip/>
      <v-axis/>
      <v-bar position="x*y"/>
    </v-chart>
  </div>
</template>

<script>

  export default {
    name: 'ActiveBar',
    props: {
      title: {
        type: String,
        default: '社区活跃度'
      },
      height: {
        type: Number,
        default: 320
      },
      ActiveBarDataSource: {
        type: Array,
        required: true
      },
      yaxisText: {
        type: String,
        default: 'y'
      }
    },
    data() {
      return { padding: ['auto', 'auto', '40', '50'] }
    },
    computed: {
      scale() {
        return [{
          dataKey: 'y',
          alias: this.yaxisText
        }]
      }
    },
    created(){
      this.loadBarData()
    },
    mounted() {
    },
    methods:{
      loadData(x, y, max, min, before = '', after = '月') {
        let data = []
        for (let i = 0; i < 12; i += 1) {
          data.push({
            [x]: `${before}${i + 1}${after}`,
            [y]: Math.floor(Math.random() * max) + min
          })
        }
        return data
      },
      // 加载柱状图数据
      loadBarData() {
        this.barData = this.loadData('x', 'y', 1000, 200)
        this.ActiveBarDataSource = this.barData
        console.log("输出得到的数据")
        console.log(this.barData)
        console.log(this.ActiveBarDataSource);
      },
    }
  }
</script>